<template>
	<view class="Loin_content">
		<view class="header">
			<view class="pwd_back">
				<image src="../../static/image/pwd_back_icon.png" @tap="back"></image>
			</view>
			<text class="login_text">{{i18n.ForgetTitle}}</text>
			<!-- 手机号 -->
			<view class="input_content account_name" :style="i18n.forgetwjimg1"><input type="text" :placeholder="i18n.input_placeholdername1"
				 v-model="phone" placeholder-class="input_placeholder" :style="i18n.input_placeholder" @blur="phoneBlur" style="text-align: right;" /></view>
			<!-- 验证码 -->
			<view class="Verification_Code vcode">
				<view class="vcode_input" :style="i18n.wjimg2"><input type="text" :placeholder="i18n.input_placeholder2" v-model="vcode"
					 placeholder-class="input_placeholder" :style="i18n.input_placeholder" @blur="yzm" /></view>
				<text @tap="send_vcode" v-if="sendVode">{{i18n.send_vcode}}</text>
				<text v-else>{{vtext}}</text>
			</view>
			<!-- 用户名 -->
			<view class="accountName">
				<view class="input_content account_name" :style="i18n.ForgetNamelimg" style="margin-top: 30upx;display: flex;justify-content: space-between;"
				 @tap="choiceName"><input type="text" disabled="true" :placeholder="i18n.Forgetplaceholder" v-model="account"
					 placeholder-class="input_placeholder" :style="i18n.input_placeholder" style="width: 70%;" />
					<image :src="isList?'../../static/image/upIcon.png':'../../static/image/downIcon.png'" style="width: 21upx;height: 13upx;margin-top: 30upx;margin-right:12upx"></image>
				</view>
				<view class="accountNameList" v-if="selectionStatus">
					<view v-if="getaccounts.lengt==0" class="listall">{{nolist}}</view>
					<view v-else class="listall" v-for="(item,index) in getaccounts" :key="index" @tap="listClick(index)">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
			<!-- 登录按钮 -->
			<image class="login_btn" :src="changeColor?'':i18n.nextimg" @tap="next"></image>

			<!-- 忘记密码和注册 -->
			<view class="ext_options">
				<text @tap="login">{{i18n.ljdl}}</text>
				<text @tap="register">{{i18n.zhzc}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "", //手机号
				vcode: "", //验证码
				sendVode: true,
				vtext: "发送验证码",
				changeColor: false,
				getaccounts: [],
				account: "", //用户名,
				selectionStatus: "",
				nolist: "", //无列表,
				isList: false,
				rtype:""
			}
		},
		computed: {
			changeData() {
				const {
					phone,
					vcode
				} = this
				return {
					phone,
					vcode
				}
			},
			i18n() {
				return this.$t('user')
			}
		},
		watch: {
			changeData: {
				handler: function(newval, oldval) {
					this.phone = newval.phone;
					this.vcode = newval.vcode;
					if (this.phone != "" && this.vcode != "") {
						this.changeColor = true
					} else {
						this.changeColor = false
					}
				},
				deep: true
			}
		},
		methods: {
			register() {
				this.$CommonJS.navigateTo('../register/register')
			},
			yzm() { //身份验证
				const _this = this
				//验证参数
				if (!this.phone) {
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入手机/邮箱' : 'Please enter your mobile phone number');
					return;
				}
				if(_this.phone&& _this.vcode){
				uni.request({
					url: this.$API.appServeApi + this.$API.getaccounts + '?i18n_language=' + uni.getStorageSync('system_info'),
					method: 'GET',
					data: {
						mobile: _this.phone,
						vcode: _this.vcode
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 200 && res.data.data != []) {
							_this.getaccounts = res.data.data
						} else {
							_this.account = ""
							_this.nolist = _this._i18n.locale == 'zh_CN' ? '暂无相对应的账户名' : 'No corresponding account name'

							this.$CommonJS.showToast(res.data.message);
							_this.getaccounts = []
						}
					}
				});
				}
			},
			phoneBlur() { //手机失去焦点点击事件
				var _this = this
				console.log(_this.phone)
				if (_this.phone.indexOf("@") == -1) {
							_this.rtype=0

				} else {
							_this.rtype=1
				}
			},
			choiceName() {
				var _this = this
				_this.selectionStatus = true
				_this.isList = !_this.isList
				if (_this.isList == true) {
					_this.selectionStatus = true
				} else {
					_this.selectionStatus = false
				}
			},
			listClick(e) { //列表点击事件
				var _this = this
				_this.account = _this.getaccounts[e]
				_this.selectionStatus = false
				_this.isList = false;
				//提示模板
				uni.setClipboardData({
					data: _this.getaccounts[e], //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: _this._i18n.locale == 'zh_CN' ? '已复制' : 'Copied',
						})
					}
				});
			},
			next() {
				const _this = this
				//验证参数
				if (!this.phone) {
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入手机号' : 'Please enter your mobile phone number');
					return;
				}
				if (!this.vcode) {
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入验证码' : 'Please enter the verification code');
					return;
				}
				//下一步
				this.$CommonJS.navigateTo('../login/login')
			},
			login() {
				uni.navigateBack({
					url: "../login/login"
				})
				// this.$CommonJS.navigateTo('../login/login')
			},
			back() {
				this.$CommonJS.navigateBack()
			},
			send_vcode() {
				//发送验证码
				const _this = this;
				if (!this.phone) {
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入手机/邮箱' : 'Please input mobile phone / email');
					return;
				}
				//手机号验证
				if(_this.rtype==0){
					if (!this.$CommonJS.PhoneValidate(this.phone)) {
						this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '手机号不正确' : 'Incorrect mobile phone number');
						return;
					}
				}

				uni.showLoading({
					
				})
				const url = this.$API.appServeApi + this.$API.getForgetcode + '?i18n_language=' + uni.getStorageSync('system_info') + "&mobile=" + this.phone+"&rtype="+_this.rtype+"&codetype=2";
				this.$CommonJS.request(url, "POST").then(res => {
					if (res.data.code == 200) {
						uni.hideLoading()
						_this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '验证码已发送' : 'Verification code sent')
							_this.getTime();
					} else {
						console.log(res)
						uni.hideLoading()
						_this.$CommonJS.showToast(res.data.message)
					}

				}).catch(error => {
					uni.hideLoading()
					_this.$CommonJS.showToast(error.message)
				})
			},
			getTime() {
				//倒计时60s
				var _this = this;

				var num = 60;
				var timer = setInterval(function() {
					if (num <= 0) {
						clearInterval(timer);
						_this.vtext = "";
						_this.sendVode = true;
						return;
					}

					_this.vtext = '重新发送' + num + 's';

					num--;
				}, 1000)
				_this.sendVode = !_this.sendVode;
			},

		}
	}
</script>

<style lang="stylus">
	@import "../../static/stylus/password/password.stylus"
	.input_placeholder 
				font-size 13px 
				color rgba(255, 255, 255, 0.3) 
				// width  calc(100% - 70upx)
				text-align right 
.accountName 
				position relative

.accountNameList 
			width 94.2% 
			height auto 
			max-height 400upx 
			border-bottom-left-radius 25upx 
			border-bottom-right-radius 25upx
			position absolute 
			top 92upx 
			z-index 99 
			border 5upx solid #fff 
			border-top none 
			background rgba(14, 67, 65, 1)
			overflow-y auto
			overflow-x hidden
			padding 40upx 10upx
	
	.listall 
				color rgba(194, 201, 223, 1) 
				font-size 22upx 
				font-weight 500 
				line-height 100upx 
				border-top 1upx solid rgba(12, 84, 83, 1)
				border-bottom 1upx solid rgba(12, 84, 83, 1)
</style>
